<template>
  <section>
    <el-row>
      <el-form :inline="true" size="mini" ref="form">
        <el-form-item label="选择公司：" >
          <el-select v-model="companyId" placeholder="请选择">
            <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row v-show="departments">
      <el-table :data="departments" border style="width: 100%">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column label="部门" prop="name" >
        </el-table-column>
        <el-table-column label="商品管理"  fixed="right">
          <template slot-scope="scope">
            <el-button @click='createCommodity(scope)' size="small" icon="edit">新建商品</el-button>
            <el-button @click='loadCommodity(scope)' size="small" >导入商品</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog title="新建商品" :visible.sync="showCommodityDialog" >
      <el-row>
        <el-form :inline="true" size="mini">
          <el-form-item label="商品名称：" >
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品类型：" >
            <el-select v-model="goodsTypeId" placeholder="请选择">
              <el-option v-for="goodsType in goodsTypes" :key="goodsType.id" :label="goodsType.name" :value="goodsType.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品规格：">
            <el-tag :key="specification" v-for="specification in specifications" closable :disable-transitions="false" @close="handleClose(specification)">
              {{specification}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新规格</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table :data="goods">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column v-for="specification in specifications" :label=specification>
            <template slot-scope="scope">
              <el-input v-if="scope.row.edit" size="small" v-model="scope.row.specification"></el-input>
              <div>{{scope.row.price}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格">
            <template slot-scope="scope">
              <el-input v-if="scope.row.edit" size="small" v-model="scope.row.price"></el-input>
              <div>{{scope.row.price}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="商品编号" >
            <template slot-scope="scope">
              <el-input v-if="scope.row.edit" size="small" v-model="scope.row.number"></el-input>
              <div>{{scope.row.number}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="numberBtn" label="生成编号" >
            <template slot-scope="scope">
              <el-button @click='creatNumber(scope)' size="small" >
                <icon name="brands/telegram-plane"></icon>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="155">
            <template slot-scope="scope">
              <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope)' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
              <el-button @click='del(scope)' size="small" >DEL</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-row>
    </el-dialog>

  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex';
  import DateFormat from '@/common/date-formater'
  import schedule from "../../sdk/api/schedule";
  import department from "../../sdk/api/department";
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "commodity2",
    data() {
      return {
        goodsBase:[],
        goods:[],
        companies:[],
        selSpecifications:[],
        companyId:null,
        departments:null,
        showCommodityDialog:false,
        specifications:['测试','测试2'],
        goodsTypeId:null,
        goodsTypes:[],
        inputVisible: false,
        inputValue: ''
      }
    },
    created(){
      //加载公司列表，用来选择
      this.loadCompanyList()
      this.loadGoodsTypes()
    },
    watch:{
      companyId(nv,ov){
        if(nv){
          this.loadDepartments(nv)//加载该公司下部门
        }
      },
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      handleClose(tag) {
        this.specifications.splice(this.specifications.indexOf(tag), 1)
      },
      showInput() {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue
        if (inputValue) {
          this.specifications.push(inputValue)
          console.log(this.specifications)
        }
        this.inputVisible = false
        this.inputValue = ''
      },

      loadGoodsTypes(){
        // getGoodsTypeList
        this.fetch({name:"getGoodsTypeList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.goodsTypes = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      loadCompanyList() {//加载公司列表
        //加载公司列表
        this.fetch({name: "getCompanyList"})
          .then((res) => {
            if (res.errCode) {
              this.$message({type: 'info', message: res.errMsg})
            } else {
              console.log(res)
              this.companies = res
            }
          })
          .catch((err) => {
            console.log(err)
            this.$message({type: 'error', message: "服务器错误"})
          })
      },
      loadDepartments(companyId){//加载部门列表
        console.log(companyId)
        this.fetch({name:"getDepartmentList",data:{companyId}})
          .then(res=>{
            if(res.errCode){
              this.$message({type:'error',message:res.errMsg})
            }else{
              console.log(res)
              this.departments=res
            }
          })
          .catch(err=>{
            console.log(err)
            this.$message({type:'error',message:'服务器错误'})
          })
      },
      createCommodity(scope){
        console.log(scope)
        this.showCommodityDialog=true
      },
      loadCommodity(scope){
        console.log(scope)
      }
    }
  }
</script>

<style scoped>

</style>
